<template>
  <div>
    <el-form ref="form" label-position="right" :model="form" :rules="rules" size="small" label-width="130px">
      <div class="g-card g-pad20">
        <div class="my-title">
          微信支付
        </div>
        <el-form-item label="商户名称:" prop="merChantName">
          <el-input style="width: 40%;" v-model="form.merChantName" placeholder="请输入商户名称"></el-input>
          <!-- <div class="tips"></div> -->
        </el-form-item>
        <el-form-item label="商户号:" prop="merChantNumber">
          <el-input style="width: 40%;" v-model="form.merChantNumber" placeholder="请输入商户号"></el-input>
          <div class="tips">用于通过API支付商户，在微信支付后台->账号中心->个人信息中获取</div>
        </el-form-item>
        <el-form-item label="商户支付Secret:" prop="merChantSecret">
          <el-input
            :disabled="!merChantSecretEditState"
            style="width: 40%;"
            :type="merChantSecretEditState ? 'text' : 'password'"
            v-model="form.merChantSecret"
            placeholder="请输入商户支付Secret"
          ></el-input>
          <el-button style="margin-left: 20px;" plain v-if="merChantSecretEditState" @click="cancelEditMerChantSecret"
            >取消</el-button
          >
          <el-button type="primary" plain v-if="merChantSecretEditState" @click="submitEditMerChantSecret"
            >保存</el-button
          >
          <el-button
            type="primary"
            style="margin-left: 20px;"
            plain
            v-if="!merChantSecretEditState"
            @click="editMerChantSecret"
            >修改</el-button
          >
          <div class="tips">用于通过API进行支付，在微信支付后台->账号中心->API安全中获取</div>
        </el-form-item>
        <el-form-item label="API证书文件" prop="certP12Url">
          <div style="display: flex; align-items: center; width: 200px;">
            <div v-if="form.certP12Url">
              <img style="height: 60px; width: 60px;" src="../../assets/image/success.png" />
            </div>
            <upload class="image-uploader" :fileUrl.sync="form.certP12Url" :format="mat" type="3">
              <span style="font-size: 14px; color: #333; margin-left: 20px; break-word: no-warp;">{{
                form.certP12Url ? '重新上传' : '上传'
              }}</span>
            </upload>
          </div>
          <div class="tips">用于校验支付环境，在微信支付后台->账户中心->账户设置->API安全中下载</div>
        </el-form-item>
      </div>
      <el-form-item label="" class="ar">
        <el-button type="primary" @click="submit">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'enterprise-wechat-part4',
    data() {
      return {
        mat: ['p12'],
        merChantSecretCopy: '',
        merChantSecretEditState: false,
        form: {},
        rules: {
          merChantName: [{ required: true, message: '必填项', trigger: 'blur' }],
          merChantNumber: [{ required: true, message: '必填项', trigger: 'blur' }],
          merChantSecret: [{ required: true, message: '必填项', trigger: 'blur' }],
          certP12Url: [{ required: true, message: '必填项', trigger: 'blur' }]
        }
      }
    },
    watch: {
      data: 'setData'
    },
    props: {
      data: {
        type: Object,
        default: {}
      }
    },
    methods: {
      editMerChantSecret() {
        this.merChantSecretEditState = true
        this.merChantSecretCopy = JSON.parse(JSON.stringify(this.form.merChantSecret))
        this.form.merChantSecret = ''
      },
      cancelEditMerChantSecret() {
        this.merChantSecretEditState = false
        this.form.merChantSecret = JSON.parse(JSON.stringify(this.merChantSecretCopy))
      },
      submitEditMerChantSecret() {
        if (this.form.merChantSecret) {
          this.$emit('submit', this.form)
          this.merChantSecretEditState = false
        }
      },
      submit() {
        this.$refs['form'].validate((validate) => {
          if (validate) {
            this.$emit('submit', this.form)
          }
        })
      },
      setData() {
        if (Object.keys(this.data).length) {
          this.form = this.data
        }
      }
    },
    mounted() {},
    created() {}
  }
</script>
<style lang="scss" scoped>
  .my-title {
  }
  .tips {
    color: #aaa;
    font-size: 12px;
  }
</style>
